<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
</head>
<body class="childrenBody"  style="-webkit-backface-visibility: hidden;">
<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input searchVal" placeholder="权限名"  name = "privName" id ="privName" />
				</div>
				<a class="layui-btn search_btn" lay-submit data-type="reload" lay-filter="query">搜索</a>
			</div>
			<div class="layui-inline">

				<!--<sec:authorize ifAllGranted="PRIV_admin"> 这个没用不知道为毛-->
					<!--Your authorities are <span th:text="${#authentication.authorities}">authorities</span>-->
					<a class="layui-btn layui-btn-normal addNews_btn" id ="addPriv"  >添加权限</a>
				<!--</sec:authorize>-->

			</div>

		</form>
	</blockquote>
	<table id="privList" lay-filter="privList"></table>

	<!--操作-->
	<script type="text/html" id="newsListBar">
		<a class="layui-btn layui-btn-xs layui-btn-normal " lay-event="show">查看菜单权限</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>
</form>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>
<script type="text/javascript">
	layui.use(['table','form'], function(){
	var table = layui.table,
        form = layui.form;
	var mytable = table.render({
		elem: '#privList'
		,url:path+"/priv/queryPriv"
		,title: '用户'
        ,where:{    //条件
            "params['name']":$("#privName").val()
        }
        ,cols: [ [ //标题栏
            {field: 'privName', title:'权限名', width:120}
            ,{field: 'privDesc', title:'描述', width:150}
            ,{field: 'remark', title:'备注', width:150}
            ,{field: 'createTime', title:'创建时间', width:180}
            ,{field: 'modTime', title:'修改时间', width:180}
            ,{ title:'操作', toolbar: '#newsListBar', width:220}
        ]]

		,page: true
//		,response: {
//		statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
//		}
        ,even: true
        ,page: {   //自定义分页条
            limit: 10
            ,curr: 1
            ,theme: '#5FB878'
            ,first: '首页'
            ,last: '尾页'
            ,prev: '<em><i class="layui-icon">&#xe603;</i></em>'
            ,next: '<em><i class="layui-icon">&#xe602;</i></em>'
            ,layout: [ 'prev', 'page', 'next', 'skip']
//            ,hash:"offset"
        }
        ,done: function(res, curr, count){

        }
        ,request: {
            pageName: 'offset' //页码的参数名称，默认：page
            ,limitName: 'limit' //每页数据量的参数名，默认：limit
        }
		});


		var tableReload = function (data) {
		    console.log(data);
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where:{"params['privName']":data.privName}
                , done: function (res, curr, count) {

                }
            })

        }
        /**
         * 监听查询按钮
         *
         */
        form.on('submit(query)', function(data){
            tableReload(data.field);
        });


		//监听行单击事件
        table.on('row(privList)', function(obj){
            //$(obj.tr).css("background","");
           // $(obj.tr).css("background","#dacdcd");
          //  console.log(obj.tr) //得到当前行元素对象
            //console.log(obj.data) //得到当前行数据
            //obj.update(fields) //修改当前行数据
        });



        //监听操作工具栏
        table.on('tool(privList)', function(obj){

            var rowData = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            var tr = obj.tr; //获得当前行 tr 的DOM对象
            switch (layEvent){
                case 'edit':
                    addOrUpdatePriv(true,rowData.id)
                    break;
                case 'del':
                    del(rowData.id);
                    break;
				case 'show':
                    showResource(rowData.id);
                    break;
                default:
                    layer.alert("未知的操作类型",{icon: 5});
            }

        });

        /**
		 * 删除方法
		 * */

		var del = function (id) {
            var load = layer.load();
            $.ajax({
                type: "POST",
                url:  path+'/priv/delete',
                dataType:"json",
                data:{"id":id},
                success: function (data) {
                    layer.close(load);
                    layer.msg(data.msg,{icon: 6});

                    if(data.code>0){
                        var data = {"privName":$("#privName").val()}
                        tableReload(data);
					}

                },
                error: function (msg) {
                    layer.close(load);
                    layer.msg("删除失败",{icon: 5})

                }
            });
        }


        /**
         * 修改新增
         * @param edit
         * @param id
         */
        var addOrUpdatePriv = function(edit,id){
            hasSave = false;
            var url = "";
            if(edit)
                url = path+"/priv/updatePage?id="+id;
            else
                url = path+"/priv/addPage";
            var index = layui.layer.open({
                title : " ",
                type : 2,
                content : url,
                success : function(layero, index){
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function(){
                        layui.layer.tips('点此返回菜单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                },
                end:function(){
                    if(hasSave) {
                        mytable.reload({
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                            ,where:{    //条件
                                "params['privName']":$("#privName").val(),
                            }
                            , done: function (res, curr, count) {
                            }
                        })
                    }
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(index);
            })
        }

        //绑定
        $("#addPriv").click(function(){
            addOrUpdatePriv();
        })


        var showResource = function(id){
            layer.open({
                type: 2,
                title: "所属菜单权限",
                closeBtn: 1, //不显示关闭按钮
//                shade: [0],
                area: ['400px', '400px'],
//                offset: 'rb', //右下角弹出
                anim: 2,
                shadeClose:true,
                content: [path+'/resource/showPriv?id='+id], //iframe的url，no代表不显示滚动条
            });
        }


    });
</script>
</body>
</html>